<template>
  <div ref="pie" style="width:100%; height:100%;"></div>
</template>

<script>
import * as echarts from "echarts";
    export default {
        name: "",
        props: {// 接受父组件的值
          pieData:{
            type:Array,
          },
        },
        data(){
            return{
              chart: null,
              seriesData1: [],
            }
        },
        watch: {
          pieData: {
            handler(val, old) {
              this.seriesData1 = this.pieData;
              this.initChart();
              //console.log(val+"监听数据");
            },
            deep: true,
          },
        },
        mounted() {
          setTimeout(() => {
            this.$nextTick(() => {
              this.initChart();
            });
          }, 500);

        },
        created() {
          this.seriesData1 = this.pieData;
        },
        methods:{
          initChart(){
            let ref = this.$refs.pie;
            //console.log(this.seriesData1)
            let datatl = this.seriesData1.map((it) => {
              return it.name;
            });
            //console.log(datatl)
            if (ref && ref !== undefined) {
              this.chart = echarts.init(ref);

              let _that = this;


              var data = [];
              var color = ['#00ffff', '#409B5C', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
              for (var i = 0; i < _that.seriesData1.length; i++) {
                data.push(
                  {
                    value: _that.seriesData1[i].value,
                    name: _that.seriesData1[i].name,
                    itemStyle: {
                      normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i],
                      },
                    },
                  },
                  {
                    value: 2,
                    name: '',
                    itemStyle: {
                      normal: {
                        label: {
                          show: false,
                        },
                        labelLine: {
                          show: false,
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0,
                      },
                    },
                  }
                );
              }
              var scaleData = [20, 20, 27, 23];

              var placeHolderStyle = {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: 'rgba(0, 0, 0, 0)',
                  borderColor: 'rgba(0, 0, 0, 0)',
                  borderWidth: 0,
                },
              };
              var datas = [];
              for (var i = 0; i < scaleData.length; i++) {
                datas.push(
                  {
                    value: scaleData[i],
                    itemStyle: {
                      normal: {
                        borderWidth: 5,
                        shadowBlur: 30,
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                          {
                            offset: 0,
                            color: '#F3C004',
                          },
                          {
                            offset: 1,
                            color: '#F3C004',
                          },
                        ]),
                        shadowColor: 'rgba(142, 152, 241, 0.6)',
                      },
                    },
                  },
                  {
                    value: 4,
                    itemStyle: placeHolderStyle,
                  }
                );
              }
              var seriesOption = [
                {
                  name: '',
                  type: 'pie',
                  clockWise: false,
                  radius: ['45%', '46%'],
                  hoverAnimation: false,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'outside',
                        color: '#000000',
                        formatter: function (params) {
                          var percent = 0;
                          var total = 0;
                          for (var i = 0; i < _that.seriesData1.length; i++) {
                            total += _that.seriesData1[i].value;
                          }
                          percent = ((params.value / total) * 100).toFixed(0);
                          if (params.name !== '') {
                            return params.name+':' + params.value + '\n' + '\n' + '占百分比：' + percent + '%';
                          } else {
                            return '';
                          }
                        },
                      },
                      labelLine: {
                        length: 30,
                        length2: 100,
                        show: true,
                        color: '#dcdcdc',
                      },
                    },
                  },
                  data: data,
                },
                {
                  name: '',
                  type: 'pie',
                  clockWise: true,
                  radius: ['35%', '36%'],
                  hoverAnimation: false,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'outside',
                        color: '#ddd',
                      },
                      labelLine: {
                        show: false,
                      },
                    },
                  },
                  data: datas,
                },
              ];

              var option;
              option = {
                backgroundColor: '#FFFFFF',
                color: color,
                title: {
                  text: '奖金项',
                  top: '48%',
                  textAlign: 'center',
                  left: '49%',
                  textStyle: {
                    color: '#000000',
                    fontSize: 22,
                    fontWeight: '400',
                  },
                },

                legend: {
                  icon: 'circle',
                  orient: 'horizontal',
                  // x: 'left',
                  data:datatl,
                  top:260,
                  align: 'right',
                  textStyle: {
                    color: '#000000',
                  },
                  itemGap: 20,
                },

                series: seriesOption,
              };

              option && this.chart.setOption(option);

            }
          },
        },
    };
</script>

<style scoped>
/deep/[data-v-37c029ad] .el-form-item--small.el-form-item{margin-top: 0!important;}
/deep/.el-avatar{background: #fff!important;display: flex;justify-content: center}
.userBoxShadow{
  border: 4px solid #fff;
  -webkit-box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  margin-right: 25px;border-radius: 50%;
}
</style>
